import routeNames from "../../utils/routeNames";
import React, {useContext, useEffect, useState} from "react";
import {logout} from "../../http/authApi";
import {useNavigate} from "react-router-dom";
import {UserContext} from "../../index";
import {useTranslation} from "react-i18next";
import {changeLanguage} from "i18next";
import './styles/Header.css'
import {changeCulture} from "../../http/userApi";
import changeCultureDto from "../../utils/dto/user/changeCultureDto";

const Header = () => {
    const [bodyClass, setBodyClass] = useState('');
    const userStore = useContext(UserContext);
    const navigate = useNavigate();
    const {t} = useTranslation();
    const [language, SetLanguage] = useState('en')

    const toggleBodyClass = () => {
        setBodyClass(prevClass => prevClass === '' ? 'nav-expanded' : '');
    };

    useEffect(() => {
        document.body.className = bodyClass;
    }, [bodyClass]);

    const handleLogoutClick = () => {
        logout().then(_ => {
            userStore.logout();
            navigate(routeNames.HOME_PAGE);
        });
    };
    
    const handleChangeLanguage = async (newLanguage: string) => {
        if (language !== newLanguage) {
            if (language === 'ru') {
                await changeLanguage(newLanguage);
                let dto = new changeCultureDto('es-Us')
                const response = await changeCulture(dto);
                if (response.status === 200)
                    SetLanguage(newLanguage)
                else
                    console.error(response.statusText)
            } else {
                await changeLanguage(newLanguage);
                let dto = new changeCultureDto('ru-Ru')
                const response = await changeCulture(dto);
                if (response.status === 200)
                    SetLanguage(newLanguage)
                else
                    console.error(response.statusText)
            }
        }
    };

    return (
        <>
            <header id="gamfi-header" className="gamfi-header-section default-header">
                <div className="menu-area menu-sticky">
                    <div className="container">
                        <div className="heaader-inner-area d-flex justify-content-between align-items-center">
                            <div className="gamfi-logo-area d-flex justify-content-between align-items-center">
                                <div className="logo">
                                    <a onClick={() => navigate(routeNames.HOME_PAGE)}
                                       style={{cursor: 'pointer'}}><img src="/assets/images/logo.png" alt="logo"/></a>
                                </div>
                                <div className="header-menu">
                                    <ul className="nav-menu">
                                        <li className="mega_menu_hov"><a onClick={() => navigate(routeNames.HOME_PAGE)}
                                                                         style={{cursor: 'pointer'}}>{t('header.home')}</a>
                                        </li>
                                        <li><a onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.projects')}</a>
                                            <ul className="sub-menu">
                                                <li><a onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                                       style={{cursor: 'pointer'}}>{t('header.projectsList')}</a></li>
                                                <li><a onClick={() => navigate(routeNames.PROJECT_DETAILS_PAGE)}
                                                       style={{cursor: 'pointer'}}>{t('header.projectDetails')}</a></li>
                                            </ul>
                                        </li>
                                        <li className="mega_menu_hov"><a
                                            style={{cursor: 'pointer'}}>{t('header.pages')} +</a>
                                            <div className="gamfi_mega_menu_sect">
                                                <div className="gamfi_mega_menu">
                                                    <div className="container">
                                                        <div className="mega_menu_content">
                                                            <div className="mega_menu_left_sect">
                                                                <div className="mega_menu_left_bg_sect">
                                                                    <div className="mega_menu_left_bg">
                                                                        <div className="mega_menu_left_bg_color">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div className="home_menu_list">
                                                                    <div className="home_menu_list_headings">
                                                                        <h2>{t('header.homePages')}</h2>
                                                                        <span><img
                                                                            src="/assets/images/megaMenu/border-buttomShape.png"
                                                                            alt="" className="img-fluid"/></span>
                                                                    </div>
                                                                    <ul>
                                                                        <li>
                                                                            <a onClick={() => navigate(routeNames.HOME_PAGE)}
                                                                               style={{cursor: 'pointer'}}>02 <span><img
                                                                                src="/assets/images/megaMenu/index-V2.png"
                                                                                alt="Index V2"
                                                                                className="img-fluid"/></span></a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                            <div className="home_menu_right_sect">
                                                                <div className="menu_column project_column">
                                                                    <div className="menu_headings">
                                                                        <h2>{t('header.projectPages')}</h2>
                                                                        <span><img
                                                                            src="/assets/images/megaMenu/border-buttomShape.png"
                                                                            alt="" className="img-fluid"/></span>
                                                                    </div>
                                                                    <ul>
                                                                        <li><a
                                                                            onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                                                            style={{cursor: 'pointer'}}>{t('header.projectsList')}</a>
                                                                        </li>
                                                                        <li><a
                                                                            onClick={() => navigate(routeNames.PROJECT_DETAILS_PAGE)}
                                                                            style={{cursor: 'pointer'}}>{t('header.projectDetails')} 1</a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div className="two_menu_column">
                                                                    <div className="menu_column project_column">
                                                                        <div className="menu_headings">
                                                                            <h2>{t('header.stakeAndFarm')}</h2>
                                                                            <span><img
                                                                                src="/assets/images/megaMenu/border-buttomShape.png"
                                                                                alt="" className="img-fluid"/></span>
                                                                        </div>
                                                                        <ul>
                                                                            <li>
                                                                                <a onClick={() => navigate(routeNames.LEADERBOARD_PAGE)}
                                                                                   style={{cursor: 'pointer'}}>{t('header.leaderboard')}</a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div className="two_menu_column">
                                                                    <div className="menu_column project_column">
                                                                        <div className="menu_headings">
                                                                            <h2>{t('header.tokenomicsAndTier')}</h2>
                                                                            <span><img
                                                                                src="/assets/images/megaMenu/border-buttomShape.png"
                                                                                alt="" className="img-fluid"/></span>
                                                                        </div>
                                                                        <ul>
                                                                            <li><a
                                                                                onClick={() => navigate(routeNames.TIER_SYSTEM_PAGE)}
                                                                                style={{cursor: 'pointer'}}>{t('header.tierSystem')} 1</a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                    <div className="menu_column project_column">
                                                                        <div className="menu_headings">
                                                                            <h2>{t('header.otherPages')}</h2>
                                                                            <span><img
                                                                                src="/assets/images/megaMenu/border-buttomShape.png"
                                                                                alt="" className="img-fluid"/></span>
                                                                        </div>
                                                                        <ul>
                                                                            <li><a
                                                                                onClick={() => navigate(routeNames.IGO_APPLY_PAGE)}
                                                                                style={{cursor: 'pointer'}}>{t('header.applyForProject')}</a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div className="menu_column project_column">
                                                                    <div className="menu_headings">
                                                                        <h2>{t('header.authPages')}</h2>
                                                                        <span><img
                                                                            src="/assets/images/megaMenu/border-buttomShape.png"
                                                                            alt="" className="img-fluid"/></span>
                                                                    </div>
                                                                    <ul>
                                                                        <li><a
                                                                            onClick={() => navigate(routeNames.REGISTER_PAGE)}
                                                                            style={{cursor: 'pointer'}}>{t('header.register')}</a>
                                                                        </li>
                                                                        <li><a
                                                                            onClick={() => navigate(routeNames.LOGIN_PAGE)}
                                                                            style={{cursor: 'pointer'}}>{t('header.login')}</a>
                                                                        </li>
                                                                        <li><a
                                                                            onClick={() => navigate(routeNames.FORGOT_PASSWORD_PAGE)}
                                                                            style={{cursor: 'pointer'}}>{t('header.forgotPassword')}</a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li><a onClick={() => navigate(routeNames.USER_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.user')}</a>
                                            <ul className="sub-menu">
                                                <li><a onClick={() => navigate(routeNames.USER_PAGE)}
                                                       style={{cursor: 'pointer'}}>{t('header.user')}</a></li>
                                                <li><a onClick={() => navigate(routeNames.WALLET_PAGE)}
                                                       style={{cursor: 'pointer'}}>{t('header.wallet')}</a></li>
                                                <li><a onClick={() => navigate(routeNames.CHAT_PAGE)}
                                                       style={{cursor: 'pointer'}}>{t('header.chat')}</a></li>
                                                <li><a onClick={handleLogoutClick}
                                                       style={{'cursor': 'pointer'}}>{t('header.logout')}</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div className="gamfi-btn-area">
                                <ul>
                                    <li>
                                        <a id="nav-expander" className="nav-expander bar" onClick={toggleBodyClass}>
                                            <div className="bar">
                                                <span className="dot1"></span>
                                                <span className="dot2"></span>
                                                <span className="dot3"></span>
                                            </div>
                                        </a>
                                    </li>
                                    <li className="buy-token">
                                        <a className="readon black-shape"
                                           onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                           style={{cursor: 'pointer'}}>
                                            <span className="btn-text">{t('header.buyToken')}</span>
                                            <span className="hover-shape1"></span>
                                            <span className="hover-shape2"></span>
                                            <span className="hover-shape3"></span>
                                        </a>
                                    </li>
                                    <li className="connect-btn-wrapper">
                                        <button type="button" onClick={() => navigate(routeNames.WALLET_PAGE)}
                                                className="connect-btn readon white-btn hover-shape"><img
                                            src="/assets/images/icons/connect.png" alt="Icon"/>
                                            <span className="btn-text">{t('header.connect')} </span>
                                            <span className="hover-shape1"></span>
                                            <span className="hover-shape2"></span>
                                            <span className="hover-shape3"></span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <div className="language-selector">
                                    <button onClick={() => handleChangeLanguage('en')}>EN</button>
                                </div>
                                <div className="language-selector">
                                    <button onClick={() => handleChangeLanguage('ru')}>RU</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <nav className="right_menu_togle mobile-navbar-menu" id="mobile-navbar-menu">
                    <div className="close-btn">
                        <a id="nav-close2" className="nav-close" onClick={toggleBodyClass}>
                            <div className="line">
                                <span className="line1"></span>
                                <span className="line2"></span>
                            </div>
                        </a>
                    </div>
                    <div className="sidebar-logo mb-30">
                        <a onClick={() => navigate(routeNames.HOME_PAGE)}
                           style={{cursor: 'pointer'}}><img src="/assets/images/logo-dark.png" alt=""/></a>
                    </div>
                    <ul className="nav-menu">
                        <li className="current-menu-item"><a onClick={() => navigate(routeNames.HOME_PAGE)}
                                                             style={{cursor: 'pointer'}}>{t('header.home')}</a>
                            <ul className="sub-menu">
                                <li><a onClick={() => navigate(routeNames.HOME_PAGE)}
                                       style={{cursor: 'pointer'}}>{t('header.home')} 2</a></li>
                            </ul>
                        </li>
                        <li><a onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                               style={{cursor: 'pointer'}}>{t('header.projects')}</a>
                            <ul className="sub-menu">
                                <li><a onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                       style={{cursor: 'pointer'}}>{t('header.projectsList')}</a></li>
                                <li><a onClick={() => navigate(routeNames.PROJECT_DETAILS_PAGE)}
                                       style={{cursor: 'pointer'}}>{t('header.projectDetails')} 1</a></li>
                            </ul>
                        </li>
                        <li className="menu-item-has-children">
                            <a>{t('header.pages')}</a>
                            <ul className="sub-menu">
                                <li className="menu-item-has-children"><a
                                    onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                    style={{cursor: 'pointer'}}>{t('header.projectPages')}</a>
                                    <ul className="sub-menu">
                                        <li><a onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.projectsList')}</a></li>
                                        <li><a onClick={() => navigate(routeNames.PROJECT_DETAILS_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.projectDetails')} 1</a></li>
                                    </ul>
                                </li>
                                <li className="menu-item-has-children"><a>{t('header.stakeAndFarm')}</a>
                                    <ul className="sub-menu">
                                        <li><a onClick={() => navigate(routeNames.LEADERBOARD_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.leaderboard')}</a></li>
                                    </ul>
                                </li>
                                <li className="menu-item-has-children"><a>{t('header.otherPages')}</a>
                                    <ul className="sub-menu">
                                        <li><a onClick={() => navigate(routeNames.IGO_APPLY_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.applyForProject')}</a></li>
                                    </ul>
                                </li>
                                <li className="menu-item-has-children"><a>{t('header.tokenomicsAndTier')}</a>
                                    <ul className="sub-menu">
                                        <li><a onClick={() => navigate(routeNames.TIER_SYSTEM_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.tieДщrSystem')} 1</a></li>
                                    </ul>
                                </li>
                                <li className="menu-item-has-children"><a
                                    onClick={() => navigate(routeNames.LOGIN_PAGE)}
                                    style={{cursor: 'pointer'}}>{t('header.authPages')}</a>
                                    <ul className="sub-menu">
                                        <li><a onClick={() => navigate(routeNames.REGISTER_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.register')}</a></li>
                                        <li><a onClick={() => navigate(routeNames.LOGIN_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.login')}</a></li>
                                        <li><a onClick={() => navigate(routeNames.FORGOT_PASSWORD_PAGE)}
                                               style={{cursor: 'pointer'}}>{t('header.forgotPassword')}</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li className="menu-item-has-children"><a onClick={() => navigate(routeNames.USER_PAGE)}
                                                                  style={{cursor: 'pointer'}}>{t('header.user')}</a>
                            <ul className="sub-menu">
                                <li><a onClick={() => navigate(routeNames.USER_PAGE)}
                                       style={{cursor: 'pointer'}}>{t('header.user')}</a></li>
                                <li><a onClick={() => navigate(routeNames.WALLET_PAGE)}
                                       style={{cursor: 'pointer'}}>{t('header.tokenomicsAndTier')}</a></li>
                                <li><a onClick={() => navigate(routeNames.CHAT_PAGE)}
                                       style={{cursor: 'pointer'}}>{t('header.chat')}</a></li>
                                <li><a onClick={handleLogoutClick}
                                       style={{'cursor': 'pointer'}}>{t('header.logout')}</a></li>
                            </ul>
                        </li>
                        <li className="menu-item-has-children">
                            <a onClick={() => navigate(routeNames.PROJECTS_LIST_PAGE)}
                               style={{cursor: 'pointer'}}>{t('header.buyToken')}</a>
                        </li>
                        <li className="connect-btn-wrapper">
                            <button type="button" className="readon black-shape-big connect-wallet-btn-for-mobile">
                                <img src="/assets/images/icons/connect_white.png" alt="Icon"/>
                                <span className="btn-text"
                                      onClick={() => navigate(routeNames.WALLET_PAGE)}>{t('header.wallet')}</span>
                                <span className="hover-shape1"></span>
                                <span className="hover-shape2"></span>
                                <span className="hover-shape3"></span>
                            </button>
                        </li>
                    </ul>
                    <ul>
                        <li className="language-selector">
                            <button onClick={() => changeLanguage("en")}>EN</button>
                        </li>
                        <li className="language-selector">
                            <button onClick={() => changeLanguage("ru")}>RU</button>
                        </li>
                    </ul>
                </nav>
            </header>
        </>
    )
        ;
}

export default Header;
